<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #panel{
            width: 400px;
            box-shadow: 0 0 10px #000;
            margin: 0 auto;
            padding: 20px;
        }
        .panel-header{
            text-align: center;
            margin-bottom: 15px;
        }
        .panel-fooder{
            text-align: center;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id = "panel">
        <section class="panel-header">
            <h2>歌曲排行榜</h1>
                <hr>
        </section>
        <section class="panel-content">
            <label><input type="checkbox"> 1、时间都去哪儿</label><br>
            <!--html中 checked="checked"表示自动选中，js中true表示选中，false表示未选中-->
            <label><input type="checkbox"> 2、海阔天空</label><br>
            <label><input type="checkbox"> 3、微微</label><br>
            <label><input type="checkbox"> 4、人海</label><br>
            <label><input type="checkbox"> 5、光辉岁月</label><br>
            <label><input type="checkbox"> 6、爱拼才会赢</label><br>
            <label><input type="checkbox"> 7、时间都去哪儿</label><br>
            <label><input type="checkbox"> 8、时间都去哪儿</label><br>
            <label><input type="checkbox"> 9、时间都去哪儿</label>
            <hr>
        </section>
        <section class="panel-fooder">
            <button id="select_all">全选</button>
            <button id="select_cancel">取消</button>
            <button id="select_revers">反选</button>
        </section>
    </div>

    <script>
        window.addEventListener('load',()=>{
            //获取所有复选框
            let inputs=document.querySelectorAll('input');

            //监听事件
            //全选
            $('select_all').addEventListener('click',()=>{
                for(let i=0;i<inputs.length;i++){
                    let input = inputs[i];
                    input.checked=true;
                }
            })
            // 取消
            $('select_cancel').addEventListener('click',()=>{
                for(let i=0;i<inputs.length;i++){
                    let input = inputs[i];
                    input.checked=false;
                }
            })
            //反选
            $('select_revers').addEventListener('click',()=>{
                for(let i=0;i<inputs.length;i++){
                    let input = inputs[i];
                    input.checked=!input.checked;
                }
            })
        });
        function $(id){
            return typeof id === "string"?document.getElementById(id) : null;
        }
    </script>
</body>
</html>